<template>
	<div class="equation-top-item-content">
		<div class="equation-top-item-bg" style="opacity: 1; width: 450px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\overbrace{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\overarc{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\underbrace{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\underarc{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\overrightarrow{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_5.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\overleftarrow{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_6.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\overleftrightarrow{x}" data-type="upDownSubscripts"
				 data-poupe="" data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/sxb_0_7.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\overleftharpoon{x}" data-type="upDownSubscripts"
				 data-poupe="" data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/sxb_0_8.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\overrightharpoon{x}" data-type="upDownSubscripts"
				 data-poupe="" data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/sxb_0_9.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\overline{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_10.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\overline{\overline{x}}" data-type="upDownSubscripts"
				 data-poupe="" data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/sxb_0_11.png">
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\underline{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_13.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\breve{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_14.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\hat{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_15.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\check{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_16.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\tilde{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_17.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\dot{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_18.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\ddot{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_19.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\grave{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_21.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\acute{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 30px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_0_22.png"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 274px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xrightarrow[y]{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_1_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xrightarrow[y]{}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_1_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xrightarrow[]{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_1_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xleftarrow[y]{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_1_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xleftarrow[]{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_1_5.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xleftarrow[y]{}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_1_6.png"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 274px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xleftrightarrow[y]{x}" data-type="upDownSubscripts"
				 data-poupe="" data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/sxb_2_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xleftrightarrow[]{x}" data-type="upDownSubscripts"
				 data-poupe="" data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/sxb_2_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xleftrightarrow[y]{}" data-type="upDownSubscripts"
				 data-poupe="" data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/sxb_2_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xLeftarrow[y]{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_2_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xLeftarrow[]{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_2_5.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xLeftarrow[y]{}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_2_6.png"></div>
		</div>
<!--		<div class="equation-top-item-bg" style="opacity: 1; width: 274px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xRightarrow[y]{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_3_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xRightarrow[]{x}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_3_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xRightarrow[y]{}" data-type="upDownSubscripts" data-poupe=""
				 data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/sxb_3_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xLeftrightarrow[y]{x}" data-type="upDownSubscripts"
				 data-poupe="" data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/sxb_3_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xLeftrightarrow[]{x}" data-type="upDownSubscripts"
				 data-poupe="" data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/sxb_3_5.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xLeftrightarrow[y]{}" data-type="upDownSubscripts"
				 data-poupe="" data-key="" style="height: 42px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/sxb_3_6.png"></div>
		</div>-->
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	append: {
		type: Function,
		default: () => {}  // 默认空函数，避免报错
	}
});
const emit = defineEmits(['fomule']);
const selectItem = (event: MouseEvent) => {
	// 获取触发事件的元素
	const target = event.currentTarget as HTMLElement;
	// 读取 data-code 属性值
	const code = target.dataset.code;
	props.append(code);
	emit('fomule', code);
};
</script>
<style scoped lang="scss">

</style>
